<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div class="container el-custom-table-container">
          <table-componets-vue
            ref="table1"
            :isShowButton="true"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            @tableEvent="tableEvent"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :isOpertions="1 == 1"
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
    <div class="el-dialog-content">
      <dialog-account-componet-vue ref="emp" @confirmEvent="dialogConfirmEvent"></dialog-account-componet-vue>
    </div>
  </div>
</template>
<script>
import reqVue from "../utils/req.vue";
import TableComponetsVue from "../components/TableComponets.vue";
import DialogAccountComponetVue from "../components/DialogAccountComponet.vue";
import confVue from "../utils/conf.vue";
let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    TableComponetsVue,
    DialogAccountComponetVue
  },
  data() {
    return {
      trees: [],
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: ""
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15
      },
      btns: [],
      page_Title: "",
      pageType: "add",
      tableLoading: true,
      apipath: "account",
      isSearch: true,
      paramter: {}
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.treeloadig = true;
    this.InitTable(null);
  },
  methods: {
    getHeight() {
      this.outHeight.height = windowHeight - 190 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    InitTable(queryModel) {
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      reqVue.$Post(this.query, this.apipath + "/v1.0/pages").then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    tableEvent(btn) {
      this.deleteEvent(btn.data);
      this.editorEvent(btn.data);
      this.enableEvent(btn.data);
      this.resetEvent(btn.data);
    },
    enableEvent(btn) {
      if (btn.value == "enable" || btn.value == "disable") {
        this.$confirm(
          btn.value == "enable"
            ? this.$t("i18n.confirm_enable")
            : this.$t("i18n.confirm_disable"),
          this.$t("i18n.confirm"),
          {
            type: "warning"
          }
        ).then(() => {
          reqVue
            .$Post(null, this.apipath + "/v1.0/enable/" + btn.primaryKeyValue)
            .then(
              function(data) {
                if (data.status) {
                  this.$message.success(data.message);
                  this.InitTable();
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    deleteEvent(btn) {
      if (btn.value == "delete") {
        this.$confirm(this.$t("i18n.confirm_del"), this.$t("i18n.confirm"), {
          type: "warning"
        }).then(() => {
          reqVue.$Post(null, this.apipath + "/v1.0/del/" + btn.primaryKeyValue).then(
            function(data) {
              if (data.status) {
                this.$message.success(data.message);
                this.InitTable();
              } else {
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      }
    },
    resetEvent(btn) {
      if (btn.value === "restpassword") {
        this.$confirm(this.$t("i18n.confirm_rest"), this.$t("i18n.confirm"), {
          type: "warning"
        }).then(() => {
          reqVue
            .$Post(null, this.apipath + "/v1.0/rest/" + btn.primaryKeyValue)
            .then(
              function(data) {
                if (data.status) {
                  this.$message.success(data.message);
                  this.InitTable();
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    editorEvent(btn) {
      if (btn.value === "batchregister") {
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
    },
    dialogConfirmEvent(res) {
      reqVue.$Post(res.result, this.apipath + "/v1.0/register").then(
        function(data) {
          if (data.status) {
            this.$message.success(data.message);
            this.InitTable(null);
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    }
  }
};
</script> 
